<template>
  <div>
    <div class="PersonTop">
      <div class="PersonTop_img">
<!--        <img v-image-preview :src="item.avatar" />-->
<!--        <img src="../../../assets/img/bgImg/plant3.png">-->
        <img v-if="item.avatar" :src="item.avatar">
        <img v-else src="../../../assets/img/bgImg/plant3.png">
      </div>
      <div class="PersonTop_text">
        <div class="user_text">
          <div class="nickName" style="display:grid;justify-content:start" >
            <span style="margin-left: 0;text-align: left">{{ item.nickName }} </span>
          </div>
          <div class="username" style="display:grid;justify-content:start" >
            <span style="margin-left: 0;text-align: left;font-size: small;color: #7b858c">用户名:{{ item.userName }} </span>
          </div>
          <div style="margin: 0;padding: 0;display:grid;justify-content:start">
           <el-tag :type="tag_type"> {{type_str}}</el-tag>
          </div>
          <div class="user_anniu" style="display:grid;justify-content:start">
            <el-button
                v-if="!guest"
                class="el-icon-edit"
                type="text"
                size="medium"
                plain
                @click="$refs.editDialog.open(item)"
            >编辑</el-button>
            <el-button
                style="margin-top: 5px"
                v-if="guest"
                class="el-icon-plus"
                type="primary"
                size="mini"
                plain
                @click=""
            >关注</el-button>
          </div>
        </div>
        <div class="user_num">
          <div style="cursor: pointer">
            <div class="num_number">{{plantList.length}}</div>
            <span class="num_text">植物数</span>
          </div>
          <div style="cursor: pointer">
            <div class="num_number">{{plantList.length}}</div>
            <span class="num_text">关注数</span>
          </div>
          <div style="cursor: pointer">
            <div class="num_number">{{item.followerNum}}</div>
            <span class="num_text">粉丝数</span>
          </div>
        </div>
      </div>
    </div>
    <div class="plants">
      <div>
        <el-form>
          <el-row>
            <el-col :span="20">
          <div class="plants_title" style="text-align: left;margin-left: 30px;margin-top: 0">我的植物</div>
            </el-col>
            <el-col :span="4">
              <div>
                <el-button
                    v-if="!guest"
                    type="success"
                    size="small"
                    icon="el-icon-plus"
                    @click="$refs.addPlantDialog.open(item)"
                >新增植物
                </el-button>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8" style="left: 200px"v-for="(plant,index) in plantList" :key="'plant'+plant.plantId">
<!--              <div v-if="num<plantList.length">{{getPlantCategoryStr(plant.categoryId)}}</div>-->
              <div class="plantListBox">
                <section>
                  <div>
                    <el-form>
                      <el-row>
                        <el-col :span="4">
                          <el-form-item style="margin-top: 20px;margin-bottom: 20px">
                            <div style="display:grid;justify-content:start;margin-left: 10px">
                              <img v-if="plant.avatar" :src="plant.avatar" width="100" height="120">
                              <img v-else src="../../../assets/img/bgImg/plant2.png" width="100" height="120">
                            </div>
                          </el-form-item>
                        </el-col>
                        <el-col :span="4">
                          <el-row type="flex" justify="left" >
                            <el-form-item style="margin-top: 10px;margin-bottom: 0;margin-left: 90px">
                              <div class="plant_name_tag" style="display:grid;justify-content:start;width:100px;height: 20px">{{plant.plantName}}</div>
                            </el-form-item>
                          </el-row>
                          <el-row>
                          </el-row>
                          <el-row>
                            <el-form-item style="margin-top: 10px;margin-bottom: 0;margin-left: 90px">
                              <div class="plant_status_tag" style="display:grid;justify-content:start;width:100px;height: 20px">
                                {{ plant.status }}</div>
                            </el-form-item>
                          </el-row>
                          <el-row>
                            <el-form-item style="margin-top: 10px;margin-bottom: 0;margin-left: 90px">
                              <div class="plant_edit" style="display:grid;justify-content:start">
                                <el-button
                                    v-if="!guest"
                                    class="el-icon-view"
                                    type="primary"
                                    size="small"
                                    plain
                                    @click="$refs.checkPlantDialog.open(plant)"
                                    style="border: white;margin-top: 10px"
                                >查看</el-button>
                                <el-button
                                    v-if="guest"
                                    class="el-icon-magic-stick"
                                    type="danger"
                                    size="small"
                                    plain
                                    @click="updateLikeCount(plant.plantId)"
                                    style="border: white;margin-top: 10px"
                                >点赞</el-button>
                              </div>
                            </el-form-item>
                          </el-row>
                        </el-col>
                      </el-row>
                    </el-form>
                  </div>
                </section>
              </div>
            </el-col>
          </el-row>
      </el-form>
      </div>
    </div>
    <edit-dialog ref="editDialog" title="编辑用户信息"  @confirmData="(item1,fileList) => updateUserInfo(item1)"/>
    <add-plant-dialog ref="addPlantDialog" title="新增植物"  @confirmData="(plant1,fileList) => addPlant(plant1)"/>
    <check-plant-dialog ref="checkPlantDialog" title="查看植物"  @confirmData="(plant2,fileList) => updatePlant(plant2)"/>
  </div>
</template>


<script>
import EditDialog from './UpdateMyInfo'
import AddPlantDialog from "./AddPlant"
import CheckPlantDialog from "./CheckPlant"
import {getUserInfo, saveUserInfo} from "@/api/user";
import {addPlant, getMyPlant, updateLikeCount, updateMyPlant} from "@/api/plant";
import {getPlantCategoryById} from "@/api/plantCategory";
import * as _ from "throttle-debounce";


export default {
  name: "My",
  components:{
    EditDialog,//编辑个人信息
    AddPlantDialog,
    CheckPlantDialog,
  },
  data(){
    return{
      visible:false,
      uploadURL:'',
      item:{
        id:'',
        userName:'',
        nickName:'',
        avatar:'',
        sex:'',
        email:'',
        type:'',
        followerNum: ''
      },
      plant:{
        plantId:'',
        plantName:'',
        categoryId:'',
        avatar:'',
        status:'',
        description:'',
        followerNum:'',
        plantAge:'',
        createBy:'',
        createTime:'',
        updateBy:'',
        updateTime:'',
        categoryStr:''
      },
      type_str:'',
      numOfPlants:'',
      plantList:[],
      tag_type:'',
      plantCategory:'',
      uid:'',
      guest:false,//是否是访客
      head:false,//是否需要header,
      num:0
    }
  },
  created() {
    this.routeChange();


  },
  watch:{
    '$route':'routeChange'
  },
  mounted() {
    this.routeChange()
  },
  destroyed() {
    console.log("destroy")
    this.uid=''
    this.routeChange()
  },
  methods:{
    getPlantCategoryStr(id){
      getPlantCategoryById(id).then(res =>{
        console.log(res.plantCategoryName)
        this.plantCategory=res.plantCategoryName
        this.num+=1
      })

    },
    routeChange:function(){
      console.log("hhhidoe",this.$route.query.uid)
      var that = this;
      that.uid = that.$route.query.uid==undefined?0:parseInt(that.$route.query.uid);//获取传参的aid
      console.log("hello!!!")
      let user=JSON.parse(localStorage.getItem("userInfo"))
      if(this.uid===''||this.uid===0){
        if(user!=null){
          this.guest=false
          this.head=false
          console.log("hello1111!!!")
          console.log(user)
          console.log(user.id)
          this.item.id=user.id;
          getUserInfo(this.item.id).then(user =>{
            this.item.userName=user.userName;
            this.item.nickName=user.nickName;
            this.item.sex=user.sex;
            this.item.email=user.email;
            this.item.avatar=user.avatar;
            this.item.type=user.type;
            this.item.followerNum=user.followerNum;
            if(this.item.type=="0"){
              this.tag_type=""
              this.type_str="花农"
            }else if(this.item.type=="1"){
              this.tag_type="success"
              this.type_str="管理员"
            }else if(this.item.type=="2"){
              this.tag_type="warning"
              this.type_str="商家"
            }
          })

          //this.getHostInfo(user.id)
        }
        this.getMyPlant(user.id)
        console.log(this.item.userName)
      }else {
        if(user!=null&&this.uid===user.id){
          this.guest=false
          this.head=true
          console.log("hello1111!!!")
          console.log(user)
          console.log(user.id)
          this.item.id=user.id;
          this.item.userName=user.userName;
          this.item.nickName=user.nickName;
          this.item.sex=user.sex;
          this.item.email=user.email;
          this.item.avatar=user.avatar;
          this.item.type=user.type;
          this.item.followerNum=user.followerNum;
          console.log("item:!!1",this.item)
          if(this.item.type=="0"){
            this.tag_type=""
            this.type_str="花农"
          }else if(this.item.type=="1"){
            this.tag_type="success"
            this.type_str="管理员"
          }else if(this.item.type=="2"){
            this.tag_type="warning"
            this.type_str="商家"
          }
          this.getMyPlant(user.id)
          console.log(this.item.userName)
        }else if(this.uid!==user.id){
          this.guest=true
          this.head=true
          this.getHostInfo(this.uid)
          this.getMyPlant(this.uid)//找到被访问用户的植物
        }
      }

    },
    getHostInfo(id){
      getUserInfo(id).then(res=>{
        let user=res
        this.item.id=user.id;
        this.item.userName=user.userName;
        this.item.nickName=user.nickName;
        this.item.sex=user.sex;
        this.item.email=user.email;
        this.item.avatar=user.avatar;
        this.item.type=user.type;
        this.item.followerNum=user.followerNum;
        if(this.item.type=="0"){
          this.tag_type=""
          this.type_str="花农"
        }else if(this.item.type=="1"){
          this.tag_type="success"
          this.type_str="管理员"
        }else if(this.item.type=="2"){
          this.tag_type="warning"
          this.type_str="商家"
        }
        console.log("host:",user)
      })
    },
    updateUserInfo(item){
      console.log("updateInfo")
      saveUserInfo(item).then(res=>{
        this.routeChange();
      })

    },
    getMyPlant(id){
      //let user=JSON.parse(localStorage.getItem("userInfo"))
      getMyPlant(id).then((res) => {
        console.log(res.records)
        this.plantList=res.records;
        //this.routeChange()
      })

    },
    addPlant(plant){
      console.log("addplant:",plant)
      addPlant(plant).then(res=>{
        this.getMyPlant(plant.createBy)
        console.log("addPlant",plant)
      })
    },
    updatePlant(plant){
      console.log("updatePlant",plant)
      updateMyPlant(plant).then(res =>{
        this.getMyPlant(plant.createBy)
      })
    },
    updateLikeCount(plantId){
      updateLikeCount(plantId).then(res=>{
        this.$message.success('点赞成功！');
        console.log("点赞量更新")
      })
    }

  },

}
</script>

<style scoped>
.plantListBox{
  position: relative;
}
.plantListBox section {
  transition: all 0.2s linear;
  position: relative;
  background: #fff;
  padding: 1px;
  margin-bottom: 50px;
  margin-left: 80px;
  border-radius: 5px;
  right: 50px;
  top: 23px;
  bottom: 0px;
}
.plantListBox section:hover {
  transform: translate(0, -2px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.my_info_container{
  transition: all 0.5s ease-out;
  font-size: 15px;
  top:33px;
  right: 100px;
}
.me-video-player {
  background-color: transparent;
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  position: fixed;
  left: 0;
  z-index: 0;
  top: 0;
}
.PersonTop {
  width: 1000px;
  height: 140px;
  padding-top: 20px;
  background-color: white;
  margin-top: 30px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  border-radius: 5px;
  box-shadow:0 0 25px #cac6c6;
}

.PersonTop_img {
  width: 150px;
  height: 120px;
  background-color: #8c939d;
  margin-right: 24px;
  margin-left: 20px;
  overflow: hidden;
  border-radius: 20px;
}

.PersonTop_img img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
}

.PersonTop_text {
  height: 120px;
  width: 880px;
  display: flex;
}

.user_text {
  width: 60%;
  height: 100%;
  line-height: 30px;
}

.nickName {
  font-weight: bold;
  font-size: x-large;
}
.user-v {
  margin-bottom: -5px;
}
.user-v-img {
  width: 15px;
  height: 15px;
}
.user-v-font {
  font-size: 15px;
  color: #00c3ff;
}
.user_num {
  width: 40%;
  height: 100%;
  display: flex;
  align-items: center;
}

.user_num > div {
  text-align: center;
  border-right: 1px dotted #999;
  box-sizing: border-box;
  width: 80px;
  height: 40px;
  line-height: 20px;
}

.num_text {
  color: #999;
}

.num_number {
  font-size: 20px;
  color: #333;
}
.el-menu-item>span {
  font-size: 16px;
  color: #999;
}
.plants{
  width: 1000px;
  height: auto;
  padding-top: 40px;
  background-color: white;
  margin-top: 220px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* height: 500px; */
  border-radius: 5px;
  background-color: white;
  box-shadow:0 0 25px #cac6c6;
}

.plants_title{
  font-weight: bold;
  font-size: x-large;
  color: #a9eca9;
}


</style>